/*
 * @Descripttion: 
 * @Author: chunhu-yin
 * @Date: 2021-03-12 14:33:16
 * @LastEditTime: 2021-03-17 20:23:10
 */
import React from 'react'
import { Form, Input, Button, Checkbox, Card } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import Auth from '@/utils/auth'
import './login.css'
import Http from '@/request'

class Login extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            username: null,
            password: null,
            isRemeber: false
        }
    }
    // 渲染用户
    isRemeber = () => {
        let userinfo = Auth.getUserPwd()
        console.log('userinfo.remember', userinfo.remember)
        if (userinfo && userinfo.remember) {
            this.setState({
                username: userinfo.username,
                password: userinfo.password,
                isRemeber: true
            })
        }
    }
    onFinish = async values => {
        console.log('Received values of form: ', values)
        let data = {
            pwd: values.password,
            phone: values.username
        }
        const res = await Http.post('/tour/auth/loginForm', data)
        if (res.code == 200) {
            console.log(res)
            // 登录成功，设置token令牌
            Auth.setToken(res.results.token)
            // 是否点击记住我，如果点击则保存用户账号和密码
            if (this.state.isRemeber) {
                values.remember = true
            } else {
                values.remember = false
            }
            Auth.setUserPwd(values)
            this.props.history.push('/admin') // 成功后跳转
        }
    }
    onChange = e => {
        this.setState({
            isRemeber: e.target.checked,
        });
    };
    // constructor加载之后,DOM渲染之前执行此方法
    componentWillMount() {
        this.isRemeber()
    }
    render() {
        return (
            <Card title="后台管理系统" className="login-form">
                <Form
                    name="normal_login"
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                        initialValue={this.state.username}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                        initialValue={this.state.password}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" noStyle>
                            <Checkbox onChange={this.onChange} checked={this.state.isRemeber}>记住我</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="www.antd-admin.cn/login">
                            忘记密码？
                    </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登 录
                    </Button>
                        或者 <a href="www.antd-admin.cn/login">注册账号!</a>
                    </Form.Item>
                </Form>
            </Card>
        )
    }
}

export default Login
